<template>
	<view class="columnbox wdh-100 content">
		<view class="info-box columnbox wdh-100">
			<view class="info-title wdh-100">当前图文问诊价格</view>
			<view class="rowbox wdh-100 spb num-box">
				<!-- <input placeholder="请输入" v-model="price" type="digit" /> -->
				<view>¥ {{price}}</view>
				<view class="dw">元/每次</view>
			</view>
		</view>
		<view class="info-box columnbox wdh-100">
			<view class="wdh-100 q-title">选择</view>
			<view class="p-box wdh-100">
				<view @click="setPrice(index)" v-for="(item,index) in list" :key='index' class="columnbox one-box"
					:class="{'sel-price':index==curprice}">
					<template v-if="item.num!=0">
						<view>{{item.num}}</view>
						<view>元/{{item.unit}}</view>
					</template>
					<template v-else>
						<view>自定义</view>
					</template>
				</view>
			</view>
		</view>
		<view class="notice-box">注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项注意事项</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view v-if="submitflag" class="rowbox wdh-100 send-btn grey-btn" @click="submitInfo">完成</view>
			<view v-else class="rowbox wdh-100 send-btn" @click="submitInfo">保存</view>
		</view>
		<u-popup :show="priceFlag" mode="center" round="10rpx" closeable @close="hidePrice">
			<view class="columnbox price-box">
				<view class="rowbox wdh-100 price-input-box">
					<input auto-focus type="digit" v-model="inputPrice" placeholder="请输入金额" />
				</view>
				<view class="def-bgcol rowbox one-btn" @click="savePrice">保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						num: 10,
						unit: '次'
					},
					{
						num: 20,
						unit: '次'
					},
					{
						num: 30,
						unit: '次'
					},
					{
						num: 40,
						unit: '次'
					},
					{
						num: 50,
						unit: '次'
					},
					{
						num: 60,
						unit: '次'
					},
					{
						num: 0,
						unit: '次'
					}
				],
				curprice: 0,
				submitflag: false,
				price: 0,
				inputPrice: '',
				priceFlag: false,
			};
		},
		onLoad() {
			this.getPrice()
		},
		methods: {
			savePrice() {
				this.priceFlag = false
				this.price = this.inputPrice
				this.inputPrice = ''
			},
			hidePrice() {
				this.priceFlag = false
				this.inputPrice = ''
			},
			setPrice(index) {
				this.curprice = index
				if (index != 6) {
					this.price = this.list[this.curprice].num
				} else {
					this.priceFlag = true
				}
			},
			getPrice() {
				this.$req.post('/doctor/doctorfwf', {
					doctorid: uni.getStorageSync('uid'),
				}).then(res => {
					this.price = res.data.data
				})
			},
			submitInfo() {
				if (!this.submitflag) {
					this.submitflag = true
					this.$req.post('/doctor/doctorfwfupdate', {
						doctorid: uni.getStorageSync('uid'),
						fwprice: this.price * 1
					}).then(res => {
						this.submitflag = false
						uni.showToast({
							title: '设置成功'
						})
						this.getPrice()
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
	}

	.info-box {
		padding: 20rpx 40rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.info-title {
		font-size: 28rpx;
	}

	.num-box {
		margin-top: 20rpx;
	}

	.num-info {
		font-size: 40rpx;
		font-weight: bold;
	}

	.dw {
		color: #959595;
		font-size: 28rpx;
	}

	.q-title {
		font-size: 28rpx;
	}

	.p-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.p-box>view:nth-child(3n) {
		margin-right: 0;
	}

	.one-box {
		width: 200rpx;
		border: #c0c3c3 solid 1px;
		height: 150rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		margin-right: 24rpx;
	}

	.sel-price {
		border: rgba(#00b6b2, .7) solid 1px;
	}

	.one-box>view:nth-child(1) {
		color: #5d5e5e;
		font-size: 40rpx;
	}

	.sel-price>view:nth-child(1) {
		color: #00b6b2;
		font-size: 40rpx;
	}

	.one-box>view:nth-child(2) {
		color: #aaacac;
		font-size: 28rpx;
	}

	.notice-box {
		font-size: 24rpx;
		width: 710rpx;
		margin: 20rpx 0;
		color: #a2a2a2;
	}

	.price-box {
		width: 500rpx;
		padding: 90rpx 20rpx 40rpx 20rpx;

		.price-input-box {
			background: #F5F8FB;
			height: 70rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;

			input {
				width: 100%;
				font-size: 28rpx;
			}
		}

		.one-btn {
			color: #fff;
			margin-top: 20rpx;
			width: 200rpx;
			border-radius: 10rpx;
			height: 70rpx;
			font-size: 28rpx;
		}
	}
</style>